<template>
  <div>
    <div class="table-data" v-show="tabShow">
      <div class="search-box">
        <!-- <el-input size="small" v-model="title" placeholder="商品名称"></el-input>
        <el-button size="small" type="primary" @click="handleSearch">搜索</el-button>
        <el-button size="small" type="primary" @click="alltableData">全部商品</el-button> -->
        <router-link :to="{name:'newEditor'}" @click.native="handleDetail()" class="user-detail el-button el-button--primary el-button--mini">新增模板</router-link>
      </div>
      <div
        ref="tableBox"
        style="overflow: scroll"
        v-loading="loading"
        element-loading-text="正在加载"
        element-loading-spinner="el-icon-loading"
      >
        <div v-if="tableData.length < 1" style=" text-align: center; padding-top: 17%; color: #909399; font-size: 16px; " >
          <span>暂无数据</span>
        </div>
        <div class="order-box" v-for="(items, index) in tableData" :key="index">
          <div class="order">
            <div class="order-top">
                <span>{{ items.mt_name }}</span>
            </div>
            <div class="edit">
                <span>最后编辑时间：{{ items.mt_update_at }}</span>
                <span class="edit1" @click="dataEdit(items)">修改</span>
                -
                <span class="edit2" @click="dataDele(items.mt_id)">删除</span>
            </div>
          </div>
          <el-table
            :data="tableData[index].mt_data"
            style="width: 100%"
            class="table-box" 
            :show-header="false">
            <el-table-column label="" prop="name"></el-table-column>
            <el-table-column label="" prop="require">
                <template slot-scope="scope">
                {{ scope.row.require?'必填':'非必填' }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="pages" ref="page-box">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 30, 50]"
          :page-size="size"
          layout="total,sizes,prev,pager,next,jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <router-view @loadData="loadData" :tabShow="tabShow"></router-view>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Provide, Prop, Watch } from "vue-property-decorator";
import goodsApi from "@/api/goods";

@Component({
  components: {},
})
export default class templateList extends Vue {
  @Provide() page: number = 1; // 当前page
  @Provide() size: number = 10; // 请求数据的个数 默认5
  @Provide() total: number = 0; // 总数据条数
  @Provide() tabShow: Boolean = true; // 是显示否列表页面
  @Provide() loading: Boolean = true; // 是否显示加载图标
  @Provide() tableData: any = [];
  @Provide() tHeight: number = document.body.offsetHeight - 323;
  @Provide() Height:any=''
  @Prop({}) tabVisible!: any;
  searchMaps: any = {};
  @Watch("$route") handleRouteChange(to: any, form: any) {
    if (form.path != "/templateList") {
      this.tabShow = this.tabVisible;
    }
  }
  @Watch("Height")
  changeHeight(){
    (this.$refs.tableBox as HTMLDivElement).style.height=this.Height + 10+ 'px'
  }
  created() {
    this.Height=document.body.offsetHeight - 323
    this.loadData();
    if (this.$route.path != "/templateList") {
      this.tabShow = false;
    }
  }
  handleDetail(){
    this.tabShow=false
  }
  loadData() {
    goodsApi
      .messageTemplateIndex(this.page, this.size, this.searchMaps)
      .then((res) => {
        console.log(res.data.data.data);
        this.tableData = res.data.data.data;
        this.loading = false
        this.total = res.data.data.total
      });
  }

  handleSizeChange(val: number): void {
    this.size = val;
    this.page = 1;
    this.loadData();
  }

  handleCurrentChange(val: number): void {
    this.page = val;
    this.loadData();
  }

  handleSearch(): void {
    // 点击搜索
    this.page = 1;
    this.loadData();
  }
  //修改
  dataEdit(row) {
    console.log(row)
    let item = JSON.stringify(row)
    this.tabShow=false
    this.$router.push({ name: 'newEditor', query: { item: row}})
  }
  //删除
  dataDele(id) {
    this.$confirm('确定要删除该留言模板吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
       closeOnClickModal:false
    }).then(() => {
      goodsApi.messageTemplateDelete(id)
      .then((res:any)=>{
        console.log(res)
        if(res.data.code==200){
          this.$message({
            message: '操作成功',
            type: "success"
          });
          this.loadData();
        }else {
          this.$message({
            message: res.data.msg,
            type: "error"
          });
        }
      });
    }).catch(() => {
      this.$message({
        type: 'info',
        message: '已取消'
      });          
    });
  }
}
</script>

<style lang="scss" >

.el-date-editor {
  margin-right: 10px;
}
.el-button--small,
.el-button--small.is-round {
  margin-right: 10px;
}

.el-button--mini,
.el-button--mini.is-round {
  margin: 5px;
}

.el-table .cell {
  text-align: left !important;
}
.order {
  overflow: hidden;
  padding: 20px 20px;
  background: rgb(246,246,246);
  
}
.edit {
  float: right;
  // font-size: 14px !important;
}
.order-top {
  float: left;
  // font-size: 14px !important;
  // font-weight: 600;
}
.edit1 {
    margin-left: 30px;
    color: #428bca;
    cursor: pointer;
}
.edit2 {
    color: #f00;
    cursor: pointer;
}
</style>